<template>
  <el-card class="user">
    <template #header>
      <div class="card-header">
        <span>
          用户管理
          <el-button-group style="margin-left: 20px">
            <el-button plain type="primary" @click="System.userDelete()"
              ><span>批量删除</span></el-button
            >
            <el-button plain type="primary" @click="System.userAdd()"
              ><span>新建用户</span></el-button
            >
          </el-button-group>
        </span>
        <span>
          <el-input v-model="search" placeholder="查找">
            <template #suffix>
              <el-icon><IEpSearch></IEpSearch></el-icon>
            </template> </el-input
        ></span>
        <span class="fileOperation">
          <el-upload
            ref="userFiles"
            v-model:file-list="System.user.userFileList"
            :show-file-list="false"
            :limit="1"
            :on-exceed="userUploadExceed"
            :auto-upload="false"
            :on-change="userUploadChange"
            ><el-tooltip
              effect="dark"
              content="请上传前确保格式相同，系统不做格式验证"
              placement="left"
            >
              <el-button plain type="primary">
                导入
                <el-icon :size="20"
                  ><IAntDesignCloudUploadOutlined></IAntDesignCloudUploadOutlined
                ></el-icon> </el-button
            ></el-tooltip>
            <template #tip>
              <div class="el-upload__tip">文件最大限制1024KB</div>
            </template>
          </el-upload>
          <el-dropdown>
            <el-button plain type="primary">
              导出<el-icon :size="20"
                ><IAntDesignCloudDownloadOutlined></IAntDesignCloudDownloadOutlined
              ></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="System.exportJson(1)"
                  >导出json</el-dropdown-item
                >
                <el-dropdown-item divided>导出其他格式</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </span>
      </div>
    </template>
    <el-table
      ref="multipleTableRef"
      :data="
        getData.slice(
          System.user.pageSize * (System.user.currentPage - 1),
          System.user.pageSize * System.user.currentPage
        )
      "
      border
      @selection-change="System.selectionChange"
    >
      <template #empty>
        {{ $t("default.noData") }}
      </template>

      <el-table-column align="center" type="selection" width="50" />
      <el-table-column
        align="center"
        prop="id"
        label="用户编号"
        width="100"
        fixed
      />
      <el-table-column
        align="center"
        prop="name"
        label="用户名称"
        width="150"
      />
      <el-table-column align="center" prop="sex" label="用户性别" width="100">
        <template #default="scope"
          ><el-tag>{{ scope.row.sex == 1 ? "男" : "女" }}</el-tag></template
        >
      </el-table-column>
      <el-table-column
        prop="identity"
        align="center"
        label="用户身份"
        width="200"
        :filters="[
          { text: 'yyqs', value: 'yyqs' },
          { text: 'admin', value: 'admin' },
          { text: 'test', value: 'test' },
        ]"
        :filter-method="filterIdentity"
        filter-placement="bottom-end"
      />
      <el-table-column prop="email" align="center" label="用户邮箱" />
      <el-table-column
        prop="date"
        align="center"
        label="创建时间"
        width="150"
      />
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button-group>
            <el-button
              type="primary"
              text
              @click="System.userEditOrDelete(1, scope.row)"
              :disabled="scope.row.name == 'admin'"
              >修改<el-icon><IEpEdit></IEpEdit></el-icon
            ></el-button>
            <el-button
              type="primary"
              text
              @click="System.userEditOrDelete(0, scope.row)"
              :disabled="scope.row.name == 'admin'"
              >删除<el-icon><IEpDelete></IEpDelete></el-icon
            ></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:currentPage="System.user.currentPage"
        v-model:page-size="System.user.pageSize"
        :disabled="false"
        :background="false"
        layout="total,sizes,prev, pager, next, jumper"
        :total="getData.length"
        :page-sizes="[10, 20, 30, 40, 50]"
      />
    </div>
    <el-dialog v-model="System.user.isDialogDisplay" title="用户信息">
      <el-form :model="System.user.usersForm">
        <el-form-item label="名称" label-width="140px" required>
          <el-input v-model="System.user.usersForm.name" />
        </el-form-item>
        <el-form-item label="性别" label-width="140px" required>
          <el-radio-group v-model="System.user.usersForm.sex">
            <el-radio :label="1" size="large" border>男</el-radio>
            <el-radio :label="0" size="large" border>女</el-radio>
          </el-radio-group></el-form-item
        >
        <el-form-item label="类型" label-width="140px" required>
          <el-select
            v-model="System.user.usersForm.identity"
            placeholder="请选择"
          >
            <el-option
              :label="item.identifier"
              :value="item.identifier"
              v-for="item in System.permission.identity"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" label-width="140px" required>
          <el-input v-model="System.user.usersForm.email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="System.userSaveOrCancel(0)">取消</el-button>
          <el-button type="primary" @click="System.userSaveOrCancel(1)"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script lang="ts">
export default {
  // name: "user",
};
</script>
<script setup lang="ts">
import {
  ElMessageBox,
  ElTable,
  genFileId,
  UploadFile,
  UploadFiles,
} from "element-plus";
import { useSystem } from "../../../store/system";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";

const System = useSystem();

//文件导入
const userFiles = ref<UploadInstance>();

const userUploadExceed: UploadProps["onExceed"] = (files) => {
  userFiles.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  userFiles.value!.handleStart(file);
};

const userUploadChange: UploadProps["onChange"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  ElMessageBox.confirm(
    `是否导入<strong><i>${uploadFile.name}</i></strong>文件内容`,
    "注意：导入前请保存原有内容，内容丢失后果由个人承担！",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      showClose: false,
      type: "error",
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      const reader = new FileReader();
      reader.readAsText(uploadFile.raw as Blob, "UTF-8");
      reader.onload = (e) => {
        const dataJson = JSON.parse(e.target?.result as string);
        System.user.users = dataJson;
      };
      ElMessage({
        type: "success",
        message: "成功导入！",
        duration: 500,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消导入！",
        duration: 500,
      });
    });
};

//搜索功能
const search = ref("");
const getData = computed(() =>
  System.user.users.filter(
    (data: { name: string }) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

//筛选
//筛选
const filterIdentity = (value: string, row: any) => {
  return row.identity == value;
};
</script>
<style scoped lang="scss">
.user {
  position: relative;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  border: 0px;

  display: flex;
  flex-direction: column;
  .card-header {
    display: flex;
    justify-content: space-between;
    .fileOperation {
      display: flex;
    }
  }
  > :deep(.el-card__body) {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0px;

    display: flex;
    flex-direction: column;
    .el-table {
      flex-grow: 1;
      flex-basis: 0;
    }
    .pagination {
      height: 50px;
      display: flex;
      justify-content: center;
      margin-top: 5px;
    }
  }
}
</style>
